<template>
  <div class="container">
    <div class="searchbar" v-show="querybarVisible">
      <el-form :model="queryForm" ref="queryForm" inline>
        <el-form-item label="项目名称" prop="projectId">
          <el-select v-model="queryForm.projectId" placeholder="请选择项目">
            <el-option
              v-for="item in projectOptions"
              :label="item.name"
              :key="item.id"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search"
            >搜索</el-button
          ></el-form-item
        >
        <el-form-item>
          <el-button type="warning" icon="el-icon-refresh"
            >重置</el-button
          ></el-form-item
        >
      </el-form>
    </div>
    <div class="main">
      <div class="toolbar">
        <el-button-group>
          <el-button type="primary" icon="el-icon-plus" @click="createHost"
            >添加</el-button
          >
          <el-button type="danger" icon="el-icon-delete">删除</el-button>
          <el-button type="success" icon="el-icon-refresh">刷新</el-button>
        </el-button-group>
        <el-button
          type="primary"
          class="right-toolbar"
          plain
          icon="el-icon-search"
          @click="querybarVisible = !querybarVisible"
        ></el-button>
      </div>
      <el-table :data="hostData" style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="ipaddr" label="主机地址"> </el-table-column>
        <el-table-column prop="projectid" label="项目名称"> </el-table-column>
        <el-table-column prop="os" label="操作系统"> </el-table-column>
        <el-table-column prop="dbs" label="数据库"> </el-table-column>
        <el-table-column prop="env" label="环境类型">
          <template slot-scope="scope"
            ><span v-if="scope.row.env == 1">验证环境</span>
            <span v-else-if="scope.row.env == 2">压测环境</span>
            <span v-else-if="scope.row.env == 3">测试环境</span>
            <span v-else-if="scope.row.env == 4">开发环境</span></template
          ></el-table-column
        >
        <el-table-column prop="purpose" label="用途描述"> </el-table-column>
        <el-table-column label="操作" min-width="160" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleHostEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="pageIndex"
          :page-size="pageSize"
          :total="totalCount"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
    <!-- dialog -- 添加/编辑用例 -->
    <el-dialog
      :title="dialogOptions.title"
      :visible.sync="dialogOptions.visible"
      width="30%"
      :close-on-click-modal="false"
      @close="dialogOptions.visible = false"
    >
      <el-form
        :model="hostForm"
        :rules="hostRules"
        ref="hostForm"
        size="mini"
        label-width="100px"
      >
        <el-form-item label="主机地址" prop="ipaddr">
          <el-input v-model="hostForm.ipaddr"></el-input>
        </el-form-item>
        <el-form-item label="项目名称" prop="projectid">
          <el-select
            v-model="hostForm.projectid"
            style="width:100%"
            placeholder="请选择项目名称"
          >
            <el-option
              v-for="item in projectOptions"
              :label="item.label"
              :key="item.value"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作系统" prop="os">
          <el-input v-model="hostForm.os"></el-input>
        </el-form-item>
        <el-form-item label="数据库" prop="dbs">
          <el-input v-model="hostForm.dbs"></el-input>
        </el-form-item>
        <el-form-item label="环境类型" prop="env">
          <el-select
            v-model="hostForm.env"
            style="width:100%"
            placeholder="请选择项目名称"
          >
            <el-option
              v-for="item in envOptions"
              :label="item.label"
              :key="item.value"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用途描述" prop="purpose">
          <el-input
            v-model="hostForm.purpose"
            type="textarea"
            class="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogOptions.visible = false">取 消</el-button>
        <el-button type="primary" @click="handleForm(dialogOptions.id)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import service from "../../api/service.js";
export default {
  data() {
    return {
      // 搜索栏是否显示
      querybarVisible: true,
      // 搜索表单
      queryForm: {
        projectId: null
      },
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      hostData: [],
      hostForm: {
        id: 0,
        projectid: null,
        ipaddr: "",
        os: "",
        dbs: "",
        env: null,
        purpose: ""
      },
      hostRules: {
        projectid: { required: true, message: "请选择项目", trigger: "change" },
        ipaddr: {
          required: true,
          min: 8,
          message: "请输入主机地址",
          trigger: "blur"
        },
        os: {
          required: true,
          min: 2,
          message: "请输入操作系统名称",
          trigger: "blur"
        },
        dbs: {
          required: true,
          min: 2,
          message: "请输入数据库名称",
          trigger: "blur"
        },
        env: {
          required: true,
          message: "请选择环境",
          trigger: "change"
        }
      },
      hostDialogOptions: {
        id: 0,
        visible: false,
        title: "添加主机信息"
      },
      envOptions: [
        { label: "验证环境", value: 1 },
        { label: "压测环境", value: 2 },
        { label: "测试环境", value: 3 },
        { label: "开发环境", value: 4 }
      ],
      projectOptions: []
    };
  },
  mounted() {
    service.getProjects().then(resp => {
      this.projectOptions = resp;
    });
  },
  methods: {
    handleHostEdit() {},
    resetHostForm() {
      this.hostForm = {
        id: 0,
        projectid: null,
        ipaddr: "",
        os: "",
        dbs: "",
        env: null,
        purpose: ""
      };
      if (this.$refs.hostForm !== undefined) {
        this.$refs.hostForm.resetFields();
      }
    },
    createHost() {
      this.resetHostForm();
      this.hostDialogOptions = {
        id: 0,
        visible: true,
        title: "添加主机信息"
      };
    },
    /*
     * 分页查询
     */
    handlePageChange(val) {
      this.pageIndex = val;
      this.queryHosts();
    },
    /*
     * 分页查询组件信息
     */
    queryHosts() {
      let _this = this;
      this.loading = true;
      service
        .queryComponents(
          this.queryForm.projectId ? this.queryForm.projectId : ZEROGUID,
          this.pageIndex,
          this.pageSize
        )
        .then(resp => {
          if (resp) {
            _this.componentsData = resp.data;
            _this.totalCount = resp.totalCount;
          }
          _this.loading = false;
        });
    },
    /*
     *新增或编辑主机信息
     */
    handleHost(id) {
      let _this = this;
      this.$refs["hostForm"].validate(valid => {
        if (valid) {
          // 添加项目
          if (id == 0) {
            service.createHost(_this.hostForm).then(resp => {
              if (resp) {
                _this.$message({
                  message: "保存主机信息成功",
                  type: "success"
                });
                _this.hostData.push(resp);
                _this.resetHostForm();
              }
            });
          } else {
            // 编辑项目
            service.updateHost(_this.hostForm).then(resp => {
              if (resp) {
                _this.$message({
                  message: "保存主机信息成功",
                  type: "success"
                });
                let row = _this.hostData.find(c => c.id == id);
                Object.assign(row, _this.projectForm);
                _this.resetHostForm();
              } else {
                _this.$message({
                  message: "保存主机信息异常",
                  type: "warning"
                });
              }
            });
          }
          _this.hostDialogOptions.visible = false;
        } else {
          _this.$message.error("保存主机信息失败");
          return false;
        }
      });
    }
  }
};
</script>

<style>
</style>